<template>
	<div>
		<!-- 头部 -->
		<div class="header">
			<el-row style="padding: 5px 0 0 0;">
				<el-col :span="4">
					标题关键字:
					<el-input v-model="aName" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="2">
					<el-button size="mini" @click="selectLike"
						style="width: 90px;height: 40px;background-color: #00A0FF;color: #fff;">
						查询结果</el-button>
				</el-col>
				<el-col :span="2">
					<el-button size="mini" @click="dialogVisibles=true,title='添加标题',update(scope.row.id)"
						style="width: 90px;height: 40px;background-color: #00A0FF;color: #fff;">
						添加标题</el-button>
				</el-col>
			</el-row>
		</div>
		<el-table :header-cell-style="{'text-align':'center'}" :cell-style="{ textAlign: 'center' }"
			:data="advertisersList.records" stripe style="width: 100% width: 80%;margin: auto">
			<el-table-column property="id" label="编号">
			</el-table-column>
			<el-table-column property="title" label="标题">
			</el-table-column>
			<el-table-column label="操作">
				<el-row slot-scope="scope">
					<el-button
						@click="dialogVisibles=true,title='修改标题',id=scope.row.id,getOne(scope.row.id),titles=scope.row.title,tagId=scope.row.tagId">修改标题</el-button>
				</el-row>
			</el-table-column>
		</el-table>
		<el-dialog :title="title" :visible.sync="dialogVisibles" width="30%" :before-close="handleClose">
			<el-row>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
					<el-form-item label="标题">
						<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="titles" 	@input="checkTitleLength"	
							style="width: 300PX; margin: 0;"></el-input>
								<p v-if="titleError" style="color:red; margin: 0;font-size: 10px;">标题长度需在5到55个字符之间</p>
					</el-form-item>
					<el-form-item label="人群标签">
						<el-select v-model="tagId" style="width: 300px;">
							<el-option v-for="(item,index) in tags" v-bind:key="index" :label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibles = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisibles = false,update()">确 定</el-button>
			</span>
		</el-dialog>
		<div>
			<el-row style="margin: 20px 0;">
				<el-col :span="11">
					<div class="block">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
							layout="total, sizes, prev, pager, next, jumper" :total="advertisersList.total">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import '@/assets/css/index.css'
	import qs from 'qs'
	export default {
		name: "qu",
		data() {
			return {
				tagId: '',
				id: '',
				dialogVisibles: false,
				titles: '',
				advertisersList: [],
				resourceCategory: [],
				aName: '',
				aId: '',
				role: '',
				categoryIds: '',
				dialogVisible: false,
				description: '',
				title: '',
				resource: [],
				roleDescriptions: {},
				ams: [],
				tags: []
			}
		},
		created() {
			this.list();
		},
		methods: {
			checkTitleLength() {
				const minLength = 5;
				const maxLength = 55;
				if (this.titles.length < minLength || this.titles.length > maxLength) {
					this.titleError = true;
				} else {
					this.titleError = false;
				}
			},
			list() {
				let than = this
				this.$axios.post('tags/list').then((res) => {
					than.tags = res.data;
					console.log("tage:" + than.tags)
				})
				this.$axios.post('amsTitle/getPageList', qs.stringify({
					size: 5,
					current: 1
				})).then((res) => {
					than.advertisersList = res.data;
					console.log(than.advertisersList)
				})
			},
			getOne(id) {
				let than = this
				this.$axios.post('amsTitle/getOne', qs.stringify({
					id: id
				})).then((res) => {
					than.ams = res.date
					console.log(res.data)
				})
			},
			update() {
				const vm = this; // 使用更直观的别名
				if (vm.id !== null && vm.id !== '') {
					this.$axios.post('amsTitle/update', qs.stringify({
						id: vm.id,
						title: vm.titles,
						tagId: vm.tagId
					})).then((res) => {
						vm.titles = ''; // 修正为title，假设你想清空的是输入框的内容
						vm.list();
						console.log(res.data);
					}).catch(error => {
						console.error('Update failed:', error);
					});
				} else {
					this.$axios.post('amsTitle/insert', qs.stringify({
						title: vm.titles,
						tagId: vm.tagId
					})).then((res) => {
						vm.list();
						console.log(res.data);
					}).catch(error => {
						console.error('Insert failed:', error);
					});
				}
			},

			select() {
				this.$axios.post('umsAdvertisingUserType').then((res) => {
					console.log(res.data)
				})
			},
			viewAccount(id, name) {
				this.$router.push({
					name: 'advertisingUser',
					params: {
						accountId: id,
						name: name
					}
				});
			},
			handleSizeChange(val) {
				let that = this
				this.$axios.post('amsTitle/getPageList', qs.stringify({
					size: val,
					current: 1,
					name: that.aName,
					id: that.aId
				})).then((res) => {
					that.advertisersList = res.data;
					console.log(that.advertisersList)
				})
			},
			handleCurrentChange(val) {
				let that = this;
				this.$axios.post('amsTitle/getPageList', qs.stringify({
					size: that.advertisersList.size,
					current: val,
					name: that.aName,
					id: that.aId
				})).then((res) => {
					that.advertisersList = res.data;
				})
			},
			selectLike() {
				let that = this
				this.$axios.post('amsTitle/getPageList', qs.stringify({
					size: 5,
					current: 1,
					title: that.aName
				})).then((res) => {
					that.advertisersList = res.data;
					console.log(that.advertisersList)
				})
			},
		}
	}
</script>

<style>
	.header {
		width: auto;
		height: 50px;
		border: 1px solid #ddd;
		margin: 15px auto;
		border-radius: 3px 3px;
		position: relative;
	}
</style>